<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d/>
<#import '${ctx}/sys/include/body.html' as c/>
<#import '${ctx}/sys/include/table/toolbar.html' as t/>
<!DOCTYPE html>
<html>
<head>
<@d.head title="数据源列表" />
</head>
<@c.body>
<table id="etl_task_table" lay-filter="etl_task_table">
</table>
</@c.body>
<script type="text/javascript">
layui.use(['table','jquery'],function(){
	var table = layui.table;
	var $ = layui.$;
	
  var tableOptions = {
    elem: '#etl_task_table'
        ,url:'${ctx}/biz/etl/task/list'
        ,cellMinWidth: 80
        ,toolbar: '#topBar'
        ,page: true
        ,cols: [[
          {field:'name', width:280, title: '标签'}
          ,{field:'config', title: '详情'}
          ,{field:'state', width:90, title: '状态',templet:function(d){
        	  if(d.state == '0') {
        		  return "准备中";
        	  }else if(d.state == '1'){
        		  return "运行中";
        	  }else {
        		  return "运行结束";
        	  }
          }},
          {field:'', width:90, title: '类型',templet:function(d){
        	  let cj = JSON.parse(d.config);
        	  if(cj.properties.spark.mode == 'remote') {
        		  return "集群任务";
        	  }else{
        		  return "本地任务";
        	  }
          }}
          ,{fixed: 'right',title:'操作', width:180, align:'center', toolbar: '#itemBar'}
        ]]
      };
	
	table.render(tableOptions);
	
	table.on('tool(etl_task_table)',function(obj){
		var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象

		  if(layEvent == 'detail'){ //查看
		    var layerIndex = layer.open({
		    	type:2
		    	,title:'数据源详情'
		    	,maxmin: true//开启最大化最小化按钮
		    	,content:['${ctx}/biz/etl/p/detail?id='+data.id]
		    });
		    layer.full(layerIndex);
		  }
		  if(layEvent == 'run') {
			  $.get("${ctx}/biz/etl/submit",{id:data.id},function(data){
				  if(data.code == 0) {
					  layer.msg("提交运行成功");
				  }else {
					  layer.msg("执行出错:"+data.code+": "+data.msg);
				  }
			  });
		  }
		  if(layEvent == 'delete') {
			  layer.confirm('真的删除吗', function(index){
				  $.get("${ctx}/biz/etl/delete",{id:data.id},function(data){
					  if(data.code == 0) {
						  layer.msg("删除成功");
					  }else {
						  layer.msg("删除出错:"+data.code+": "+data.msg);
					  }
				  });
			  });
		  }
	});
});

</script>
<script type="text/html" id="itemBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="run">运行</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="topBar">
	<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>